<template>
 <div class="tab-control">
     <div v-for="(item, index) in titles" :key="item" class="tab-control-item"
      :class="{active: index === currentIndex}"
      @click="itemClick(index)">
         <span>{{item}}</span>
     </div>
 </div>
</template>

<script>
 export default {
   data () {
     return {
         currentIndex: 0,     }
   },
   props: {
      titles: {
           type: Array,
       default () {
           return[]
       }
      }
   },
   created() {

   },
   methods: {
       itemClick(index) {
           this.currentIndex = index
           this.$emit('tabClick',index)
       },

   }
 }
</script>

<style scoped>
    .tab-control {
        display: flex;
        text-align: center;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        background-color: #000;
    }

    .tab-control-item {
        flex: 1;
    }

    .active {
        color: pink;
        border-bottom: 1px solid rgb(218, 25, 25);
    }
 
</style>
